<!DOCTYPE html>
<html lang="en" class="app">

<head>
    {include file="public:head_file"/}

</head>

<body class="">
<section class="vbox">
    {include file="public:header"/}
    <section>
        <section class="hbox stretch">
            {include file="public:slidemenu"/}
            <section id="content">
                <section class="vbox">
                    <section class="w-f-md" id="bjax-target">
                        <section class="hbox stretch">
                            <!-- side content -->
                            <aside class="aside bg-light dk" id="sidebar">
                                <section class="vbox animated fadeInUp">
                                    <section class="scrollable hover">
                                        <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                                            <a href="genres.html" class="list-group-item">
                                                All
                                            </a>
                                            <a href="genres.html" class="list-group-item active">
                                                acoustic
                                            </a>
                                        </div>
                                    </section>
                                </section>
                            </aside>
                            <!-- / side content -->
                            <section>
                                <section class="vbox">
                                    <section class="scrollable padder-lg">
                                        <h2 class="font-thin m-b">Acoustic</h2>
                                        <div class="row row-sm">
                                            <!--一个格子-->
                                            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                                <div class="item">
                                                    <div class="pos-rlt">
                                                        <div class="item-overlay opacity r r-2x bg-black">
                                                            <div class="center text-center m-t-n">
                                                                <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                                            </div>
                                                        </div>
                                                        <a href="track-detail.html"><img src="__STATIC__/index/images/m1.jpg" alt="" class="r r-2x img-full"></a>
                                                    </div>
                                                    <div class="padder-v">
                                                        <a href="track-detail.html" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Tempered Song</a>
                                                        <a href="track-detail.html" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Miaow</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--一个格子结束-->
                                            <!--一页十二个-->
                                        </div>
                                        <!--分页用-->
                                        <!--<ul class="pagination pagination">-->
                                            <!--<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>-->
                                            <!--<li class="active"><a href="#">1</a></li>-->
                                            <!--<li><a href="#">2</a></li>-->
                                            <!--<li><a href="#">3</a></li>-->
                                            <!--<li><a href="#">4</a></li>-->
                                            <!--<li><a href="#">5</a></li>-->
                                            <!--<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>-->
                                        <!--</ul>-->
                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                    {include file="public:player"/}
                </section>
            </section>
        </section>
    </section>
</section>
{include file="public:footer"/}
</body>

</html>